﻿/*webkit scroll*/
::-webkit-scrollbar-track-piece {background-color:#f5f5f5;}
::-webkit-scrollbar {width:6px;height:13px;}
::-webkit-scrollbar-thumb {background-color:#c2c2c2;background-clip:padding-box;min-height:28px;border-radius:3px;}
::-webkit-scrollbar-thumb:hover {border:1px solid #636363;background-color:#929292;}
/* style */
body{background-size:cover;background-position: center;background-attachment: fixed;}
.head{position: fixed;left: 0;top:0;width: 100%;background:#333;height: 45px;
z-index: 51;color:#fff;}
.head_T{cursor: pointer;font-size:22px;opacity: .9;float: left;margin:0 1em;
	font-family: arial;line-height: 45px;}
.head_T:hover{opacity: 1;}
.head_right{float: right;margin:0 1em; line-height: 45px;}
.head_right .ion{font-size:1.2em;}
.head_right .userMenu{width:100px;}

.foot{background: #333; padding: 24px; overflow: hidden;color:#666;margin:50px 0 0 45px;
border-top:10px solid #ff6908;font-size:14px;}
.foot a:hover{color:#eee;}

.menu-bar{position: fixed;left: 0;top:0;width: 45px;height: 100%;background:#fff;opacity: .6;
-webkit-transition:all ease .32s;
        transition:all ease .32s; z-index: 1;border-right:1px solid #ccc;background:#fff;}
.menu-bar:empty{left:-45px;}
.menu-bar:hover{opacity: 1;width: 150px;}
.main-nav{width: 100%;overflow: hidden;padding-top: 45px;}
.main-nav li{height: 45px;line-height: 45px;width: 150px;cursor: pointer;color:#777;}
.main-nav .ion{margin:0;width: 45px;text-align: center;font-size:22px;}
.main-nav .cur{background:#ccc;color:#333;}
.main-nav li:hover{background:#eee;color:#333;}
.sub-nav{position: absolute;left: 100%;top:0;height: 100%;overflow: hidden;background:#eee;
border-right: 1px solid #ccc;color:#aaa;width: 0;overflow: hidden;-webkit-transition:width ease .32s;transition:width ease .32s;}
.sub-nav ul{padding:45px 0 14px;display: none;width: 120px;}
.sub-nav li{height: 45px;line-height: 45px;cursor: pointer;padding:0 14px;color:#666;}
.sub-nav .cur{background:#aaa;color:#fff;}
.sub-nav li:hover{background:#666;color:#fff;}
.sub-nav.show{width: 120px;}
.mainCont{padding: 60px 20px 20px;background:rgba(255,255,255,.8);}
/*欢迎屏*/
.welcome{padding-bottom: 300px;padding-top: 90px;}
.welcome ._cont{padding: 20px; background: rgba(255,255,255,.8);}
.welcome ._T{ text-align: center; border-bottom: solid 1px #e5e5e5;
  padding-bottom: 15px;  margin: 30px 0 20px 0;font-size: 60px;}
.welcome ._p{  font-size: 22px; color: #777;}
.search{width: 800px;margin:50px auto;}
.search:hover .form-control{border-color:#66afe9;}
.quickStart{margin:80px auto 0;}
.filter{margin-bottom: 40px;}
#configCode{height: 100px;resize:none;border-style: dashed;}
/*组件列表*/
.widget-list {position: relative; min-height: 300px;}
.widget-list li{margin-bottom:30px;cursor: pointer;}
.widget-list ._layer{ position: relative; background:#fff;padding:0 0 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.2);overflow: hidden;}
.widget-list ._album{margin-bottom: .5em;background:#eee;}
.widget-list ._album:after{position: absolute;content: "";left: 0;width: 100%;bottom:0;
border-top:1px solid #eee;}
.widget-list ._t{font-size:18px;font-weight: 100;padding:0 10px ;}
.widget-list p{padding:0 1em;font-size:12px;color:#999;}
.widget-list ._name{position: absolute;right: -150px;top:-80px;width:150px;height: 80px;line-height: 50px;
text-align: right; -webkit-transition:all ease .32s; transition:all ease .32s;}
.widget-list ._name span{display: block;position: relative;z-index: 2;color: #fff;padding:0 .5em;}
.widget-list ._name:before{content: ""; position: absolute;width:0;height: 0;border-style:solid;
border-color:#c5a167 #c5a167 transparent transparent;right: 0;top:0;border-width:40px 75px;
z-index: 1;}
.widget-list ._layer:hover{box-shadow: 0 0 4px rgba(0,0,0,.3);}
.widget-list ._layer:hover ._album:after{border-color:#ccc;}
.widget-list ._layer:hover ._name{right: 0;top:0;}
.widget-list .widget_empty_tip{font-size:42px;text-align: center;padding:30px 0;}

/*弹窗*/
.playTime{position: relative; background:#eee;box-sizing:border-box;padding-top: 45px;}
.playTime_head{position: absolute;left:0;top:0;width:100%; height: 45px;}
.playTime_title{text-align:center;line-height: 45px;font-size:18px;color:#333;}
.playTime_close{position: absolute; font-size:22px;cursor: pointer;width:45px;text-align: center;
height: 40px;line-height: 40px;left: 0;top:0;}
.playTime_close:hover{opacity: .8;}
.play_area{width:1200px; background:#fff; height: 90%;padding:20px;border-radius: 4px;box-sizing:border-box;
	box-shadow: 1px 1px 4px rgba(0,0,0,.3) inset; overflow-x:hidden;overflow-y:auto;}

/*去滚动条*/
.docStatic{height: 100%;}
.docStatic body{height: 100%;overflow: hidden;}

.playTime_panel{position: fixed;right: 0;top:0;height: 100%;width:0;z-index: 12;}
.playTime_mark{position: absolute;left: 0;width: 280px;height: 80%;top:10%;background:#111;
border-radius: 4px 0 0 4px;padding:36px 0 15px; -webkit-transition:left ease .32s; transition:left ease .32s;z-index: 1;}
.playTime_mark.show{left: -280px;z-index: 2;}
.playTime_mark ._tag{position: absolute;width: 100px;height: 40px;line-height: 40px;
background:#111;color:#fff;font-size:14px;border-radius: 0 16px;text-align: center;
left: -100px;cursor: pointer;}
.playTime_mark ._clo{position: absolute;right: 4px;top:0;width: 40px;height: 36px;
line-height: 36px;cursor: pointer; text-align: center;font-size:22px;color:#fff; }
.playTime_mark ._clo:hover{opacity: .8;}
.playTime_mark .panelWrap{height: 100%;padding:0 15px; overflow-y: auto;overflow-x: hidden;}
.playTime_mark .control-label{cursor: pointer;}
.playTime_mark .control-label:hover{color:#000;}
.playTime ._csspanel{background:#85DB18;}
.playTime ._csspanel ._tag{ top:50px;background:#85DB18;}
.playTime ._csspanel input[type="color"]{width: 100%;}

.playTime ._jspanel{background:#CDE855;}
.playTime ._jspanel ._tag{ top:100px;background:#CDE855;}
.playTime ._datapanel{background:#A7C520;}
.playTime ._datapanel ._tag{ top:150px;background:#A7C520;}
.playTime ._getconfig{background:#493F0B;}
.playTime ._getconfig ._tag{ top:200px;background:#493F0B;}
.playTime ._getconfig form{padding:20px 0;}
.playTime ._getconfig .configCodeBox{height: 300px;resize:none;cursor: pointer;
background:rgba(255,255,255,.8);color:#666;overflow: hidden;}
.playTime ._getconfig .configCodeBox:hover{background:#fff;color:#333;}

.playTime ._getcode ._tag{ top:250px; }
.playTime ._getcode form{padding:20px 0;}
/*loading*/
.bubblingG {position: relative; width: 80px; height: 50px; text-align: center; margin:0 auto;
top:50px;}
.bubblingG span { display: inline-block; width: 10px; height: 10px; margin: 25px auto; 
	-webkit-animation: bubblingG .6s infinite alternate; 
	animation: bubblingG .6s infinite alternate;
	vertical-align: middle;	border-radius: 50px; background: #000;}
#bubblingG_1 {-webkit-animation-delay: 0s; 	animation-delay: 0s;}
#bubblingG_2 {-webkit-animation-delay: 0.18s; animation-delay: 0.18s;}
#bubblingG_3 {-webkit-animation-delay: 0.36s; animation-delay: 0.36s;}
@-webkit-keyframes bubblingG { 0% { width: 10px; height: 10px; -webkit-transform: translateY(0);background-color: #000; }
    100% { width: 24px; height: 24px; -webkit-transform: translateY(-21px);background-color: #fff; }}
@keyframes bubblingG { 0% { width: 10px; height: 10px; transform: translateY(0);background-color: #000; }
    100% { width: 24px; height: 24px; transform: translateY(-21px);background-color: #fff; }}

/*用户设置*/
.userSetForm{padding:20px;}
.userCount{padding:10px;max-height: 550px;overflow: auto;}
